'use client'
import Image from 'next/image'
import Link from 'next/link'
import { useState, useEffect } from 'react'
import { ROUTE_CONTACT } from '@/config/settings'
import { Settings } from 'lucide-react'
import IconButton from '@/components/common/IconButton'

export default function CompanyInfo({ companyInfo, userInfo }) {
  const [permissions, setPermission] = useState([]);
  useEffect(() => {
    let getPermissions = userInfo?.roleInfo?.permissions
    if (getPermissions?.length === 0) return setPermission([]);
    getPermissions = getPermissions?.map(item => item.path);
    setPermission(getPermissions);
  }, [userInfo?.roleInfo?.permissions]);
  return (
    <div className="bg-white px-4 py-4 rounded-sm overflow-hidden">
      {
        !!companyInfo && (
          <div className="flex flex-col gap-2 leading-normal">
            <div className='flex items-start justify-between'>
              <div className="flex items-start flex-col gap-1 mb-2">
                {companyInfo?.logo && <Image src={companyInfo.logo} alt="logo" width={720} height={720} className="rounded w-auto object-cover h-7" style={{ background: '#fff' }} />}
                {companyInfo?.name && <h2 className="text-sm text-black-200 font-normal">{companyInfo.name}</h2>}
                {companyInfo?.en_name && <p className="text-xs text-black">{companyInfo.en_name}</p>}
              </div>
              {permissions?.includes(ROUTE_CONTACT) && <IconButton className='w-9! h-9!'><Link className='w-full h-full flex justify-center items-center font-normal ' href={ROUTE_CONTACT}><Settings color="#ffffff" /></Link></IconButton>}
            </div>
            <div className=" w-50"> {companyInfo?.cover && <Image src={companyInfo.cover} alt="cover" width={1920} height={1080} className="w-full object-cover aspect-video" />} </div>
            {companyInfo?.description && <div className="text-sm text-black"><span className="font-normal">简介：</span>{companyInfo.description}</div>}
            {companyInfo?.address && <div className="text-sm text-black"><span className="font-normal">地址：</span>{companyInfo.address}</div>}
            {companyInfo?.website && <div className="text-sm text-black"><span className="font-normal">官网：</span> <a href={`https://${companyInfo.website}`} target="_blank" rel="noopener noreferrer" className="text-black hover:text-gray-700 underline transition-colors duration-150" style={{ wordBreak: 'break-all' }} > {companyInfo.website} <svg className="inline ml-1 mb-0.5 w-4 h-4 text-black" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"> <path strokeLinecap="round" strokeLinejoin="round" d="M17 7l-10 10M21 3h-6a2 2 0 00-2 2v6m8-8v8m0-8l-8 8" /> </svg> </a> </div>}
            {companyInfo?.phone && <div className="text-sm text-black"><span className="font-normal">电话：</span>{companyInfo.phone}</div>}
            {companyInfo?.mobile && <div className="text-sm text-black"><span className="font-normal">手机：</span>{companyInfo.mobile}</div>}
            {companyInfo?.email && <div className="text-sm text-black"><span className="font-normal">邮箱：</span>{companyInfo.email}</div>}
            {companyInfo?.wechat && <div className="text-sm text-black"><span className="font-normal">微信：</span>{companyInfo.wechat}</div>}
            {companyInfo?.contact && <div className="text-sm text-black"><span className="font-normal">联系人：</span>{companyInfo.contact}</div>}
          </div>
        )
      }
    </div>
  )
}